<template>
  <div class="order-pay-page gap flex flex-col mx-auto max-w-7xl">
    <div class="box-center grid grid-cols-5 !w-full">
      <div class="left col-span-3 !w-auto">
        <div class="mode lg:!px-0">
          <div class="title flexbox flex-align-center">
            <h1 class="text">{{ $t('orderPage.payTitle') }}</h1>
          </div>
        </div>
        <div class="goods lg:!px-0">
          <div class="title capitalize">{{ $t('orderPage.goodsInfo') }}</div>

          <!-- {{ detailInfo }} -->
          <div class="cards" v-if="detailInfo.order_goods">
            <div class="cards-item">
              <div class="top flexbox flex-align-center">
                <span class="text">{{ $t('orderPage.goodsInfo') }}</span>
                <!-- <span class="no">{{item.order_no||'--'}}</span> -->
              </div>
              <div class="flex flex-col">
                <div class="goods-info flexbox flex-align-center flex-justify-between" v-if="detailInfo.order_goods.length > 1">
                  <div class="goods-left flexbox flex-align-center" v-if="detailInfo.order_goods.length">
                    <img
                      loading="lazy"
                      class="img"
                      v-for="item in detailInfo.order_goods.slice(0, 4)"
                      :key="item.order_no"
                      :alt="item.goods_info.image"
                      v-lazy="$globalFn.imgPrefixUrl(item.goods_info ? item.goods_info.image : '')"
                      srcset
                      @click="goDetail(item)"
                    />
                    <!-- <div class="left-info">
                                    <div class="name">{{item.goods_info?item.goods_info.goods_name:'--'}}</div>
                                    <div class="type">{{item.goods_info&&item.goods_info.sku&&item.goods_info.sku?item.goods_info.sku.title:'--'}}</div>
                  </div>-->
                  </div>
                  <div class="goods-right">
                    <!-- <div class="price">{{item.currency_symbol}}{{item.unit_price||0}}</div>
                  <div class="num" v-if="item.total_num">x{{item.total_num||0}}</div>-->
                    <div class="total flexbox flex-align-center" @click="showgoods = true">
                      <span class="num">X{{ detailInfo.order_goods ? detailInfo.order_goods.length : 0 }}</span>
                      <img
                        loading="lazy"
                        class="icon"
                        src="https://cd.sealmg.com/assets/img/arrow-right-edit.png"
                        alt="https://cd.sealmg.com/assets/img/arrow-right-edit.png"
                        srcset
                      />
                    </div>
                  </div>
                </div>
              </div>
              <template v-if="detailInfo.order_goods.length <= 1">
                <div
                  class="goods-info flexbox flex-align-center flex-justify-between"
                  v-for="item in detailInfo.order_goods.slice(0, 1)"
                  :key="item.order_no"
                >
                  <div class="goods-left flexbox flex-align-center" @click="goDetail(item)">
                    <img
                      loading="lazy"
                      class="img"
                      v-lazy="$globalFn.imgPrefixUrl(item.goods_info ? item.goods_info.image : '')"
                      alt="item.goods_info.image "
                      srcset
                    />
                    <div class="left-info">
                      <div class="name flex gap-2 items-center">
                        <span class="line-clamp-1">
                          {{ item.goods_name }}
                        </span>
                         <img
                          src="https://cd.sealmg.com/assets/img/discountLabel.png"
                          class="size-3"
                          alt="discountLabel"
                          title="discountLabel"
                          v-if="item.max_discount > 0"
                        />
                      </div>
                      <div class="type one-line">
                        {{ item.sku_name }}
                      </div>
                    </div>
                  </div>
                  <div class="goods-right">
                    <div class="price">{{ item.currency_symbol }}{{ item.unit_price || 0 }}</div>
                    <div class="num" v-if="item.total_num">x{{ item.total_num || 0 }}</div>
                  </div>
                </div>
                <div class="ddd px-[12px] py-0 flex justify-between pb-4">
                  <div class="flex flex-col gap-2">
                    <div v-for="(i, k) in result" :key="k" class="flex justify-start">
                      <span class="font-medium text-[12px] text-[#999999]">
                        {{ i.field }}
                      </span>
                    </div>
                  </div>
                  <div class="flex flex-col gap-2">
                    <div v-for="(i, k) in result" :key="k" class="flex justify-end">
                      <span class="font-medium text-[12px] text-[#999999] w-full text-right">
                        {{ functions(i) }}
                      </span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="list" v-if="detailInfo.order_goods">
            <template v-if="detailInfo.order_goods[0].type == 1 || detailInfo.order_goods[0].type == 3">
              <div class="goods-row row-header flexbox flex-align-center flex-justify-between">
                <div class="item-col base-col flexbox flex-align-center line-clamp-1">
                  {{ $t('formItem.productName') }}
                </div>
                <div class="lex-1 flexbox flex-align-center">
                  <div class="item-col no-co line-clamp-1">{{ $t('userInfo.orderNo') }}</div>
                  <div class="item-col price-col line-clamp-1">
                    {{ $t('formItem.productPrice') }}
                  </div>
                  <div class="item-col num-col line-clamp-1">
                    {{ $t('formItem.productTotal') }}
                  </div>
                </div>
              </div>
            </template>
            <template v-if="detailInfo.order_goods[0].type == 2">
              <div class="goods-row row-header flexbox flex-align-center flex-justify-between">
                <div class="item-col base-col flexbox flex-align-center line-clamp-1">
                  {{ $t('formItem.productName') }}
                </div>
                <div class="flexbox flex-align-center">
                  <div class="item-col no-col line-clamp-1" v-for="(i, k) in result" :key="k">
                    {{ i.field }}
                  </div>
                  <div class="item-col no-col line-clamp-1">{{ $t('userInfo.orderNo') }}</div>

                  <div class="item-col num-col line-clamp-1">
                    {{ $t('formItem.productTotal') }}
                  </div>
                </div>
              </div>
            </template>

            <template v-if="detailInfo.order_goods[0].type == 1 || detailInfo.order_goods[0].type == 3">
              <div
                class="goods-row row-body flexbox flex-align-center flex-justify-between"
                v-for="item in detailInfo.order_goods"
                :key="item.order_no"
              >
                <nuxt-link
                  class="item-col base-col flexbox flex-align-center cursor-pointer"
                  :to="item.type !== 3 ? localePath(`/product/${item.goods_info.code}`) : $route.fullPath"
                >
                  <div class="img overflow-hidden border">
                    <img
                      loading="lazy"
                      class="size-full object-cover"
                      v-lazy="$globalFn.imgPrefixUrl(item.goods_info ? item.goods_info.image : '', 'goods_thumb_1_1')"
                      alt="Product thumbnail"
                      title="Order product preview"
                    />
                  </div>
                  <div class="info">
                    <div class="name flex gap-2 items-center">
                      <span class="line-clamp-1"> {{ item.goods_name }} </span>
                      <img
                        src="https://cd.sealmg.com/assets/img/discountLabel.png"
                        class="size-4"
                        alt="Discount indicator"
                        title="Product discount badge"
                        v-if="item.max_discount > 0"
                      />
                    </div>
                    <div class="desc one-line">
                      {{ item.sku_name }}
                    </div>
                  </div>
                </nuxt-link>
                <div class="flexbox flex-align-center">
                  <div class="item-col no-col" @click="orderDetail(item)">
                    {{ item.order_no || '--' }}
                  </div>
                  <div class="item-col price-col">
                    <div class="price">{{ item.currency_symbol }}{{ item.unit_price || 0 }}</div>
                    <div class="num" v-if="item.total_num">x{{ item.total_num || 0 }}</div>
                  </div>
                  <div class="item-col total-col">{{ item.currency_symbol }}{{ item.payable_price_text || item.payable_price }}</div>
                </div>
              </div>
            </template>
            <template v-if="detailInfo.order_goods[0].type == 2">
              <div class="goods-row row-body flexbox flex-align-center flex-justify-between">
                <nuxt-link
                  class="item-col base-col flexbox flex-align-center cursor-pointer"
                  :to="localePath(`/product/${detailInfo.order_goods[0].goods_info.code}`)"
                >
                  <div class="img overflow-hidden border">
                    <img
                      loading="lazy"
                      class="size-full object-cover"
                      v-lazy="
                        $globalFn.imgPrefixUrl(
                          detailInfo.order_goods[0].goods_info ? detailInfo.order_goods[0].goods_info.image : '',
                          'goods_thumb_1_1'
                        )
                      "
                      alt="Product thumbnail"
                      title="Order product preview"
                    />
                  </div>
                  <div class="info">
                    <div class="name flex gap-2 items-center">
                      <span class="line-clamp-1"> {{ detailInfo.order_goods[0].goods_name }} </span>
                      <img
                        src="https://cd.sealmg.com/assets/img/discountLabel.png"
                        class="size-4"
                        alt="Discount indicator"
                        title="Product discount badge"
                        v-if="detailInfo.order_goods[0].max_discount > 0"
                      />
                    </div>
                    <div class="desc one-line">
                      {{ detailInfo.order_goods[0].sku_name }}
                    </div>
                  </div>
                </nuxt-link>
                <div class="flexbox flex-align-center">
                  <!-- <div class="item-col no-col" @click="orderDetail(item)">
                    {{ item.order_no || '--' }}
                  </div>
                  <div class="item-col price-col">
                    <div class="price">{{ item.currency_symbol }}{{ item.unit_price || 0 }}</div>
                    <div class="num" v-if="item.total_num">x{{ item.total_num || 0 }}</div>
                  </div> -->
                  <div class="item-col no-col !text-black" v-for="(i, k) in result" :key="k">
                    {{ functions(i) }}
                  </div>
                  <div
                    class="item-col no-col"
                    @click="
                      orderDetail({
                        order_no: detailInfo.order_goods[0].order_no
                      })
                    "
                  >
                    {{ detailInfo.order_goods[0].order_no || '--' }}
                  </div>
                  <div class="item-col total-col">
                    {{ detailInfo.order_goods[0].currency_symbol
                    }}{{ detailInfo.order_goods[0].payable_price_text || detailInfo.order_goods[0].payable_price }}
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="pay lg:!px-0" v-if="detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm'">
          <div class="title !mb-4">{{ $t('orderPage.selectPay') }}</div>
          <div class="list flexbox flex-wrap !w-full !grid grid-cols-2 gap-4">
            <div
              :class="['item flexbox flex-align-center', curPay.id == item.id ? 'active' : '']"
              class="!w-full !col-span-1 !m-0 !justify-between"
              v-for="item in payList"
              :key="item.id"
              @click="changePay(item)"
            >
              <div class="left flexbox flex-align-center">
                <div class="img">
                  <img loading="lazy" class="icon" v-lazy="$globalFn.imgPrefixUrl(item.pay_icon)" :alt="item.pay_icon" srcset="" />
                </div>
                <div class="info">
                  <div class="name">{{ item.pay_name || '--' }}</div>
                  <div class="cost" v-if="item.service_price == 0">
                    {{ $t('orderPage.serviceFree') }}
                  </div>
                  <div class="rate" v-else>{{ item.service_percentage }}%{{ $t('orderPage.serviceCharge1') }}</div>
                </div>
              </div>
              <div class="checkbox flex-none">
                <img loading="lazy" class="icon" v-if="curPay.id == item.id" src="https://cd.sealmg.com/assets/img/checkbox-active.png" alt srcset />
                <img loading="lazy" class="icon" v-else src="https://cd.sealmg.com/assets/img/checkbox.png" alt srcset />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right col-span-2 !w-auto /lg:!px-0 sticky top-[6rem] h-fit">
        <div class="mode lg:!px-0">
          <div class="title flexbox flex-align-center px-[8px]">
            <h2 class="text">{{ $t('orderPage.payInfo') }}</h2>
          </div>
          <div class="content pay">
            <div class="pay-status flexbox flex-align-center flex-justify-between" v-if="detailInfo.order_status == 4">
              <span class="text text-success">{{ $t('status.completed') }}</span>
              <img loading="lazy" class="icon" src="https://cd.sealmg.com/assets/img/pay-status-success.png" alt />
            </div>
            <div class="pay-status flexbox flex-align-center flex-justify-between" v-if="detailInfo.order_status == 6">
              <span class="text text-close">{{ $t('status.expired') }}</span>
              <img loading="lazy" class="icon" src="https://cd.sealmg.com/assets/img/pay-status-close.png" alt />
            </div>
            <div
              class="pay-status flexbox flex-align-center flex-justify-between"
              v-if="detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm'"
            >
              <div>
                <!-- <span class="text text-wait" v-if="days > 0">{{ days }}</span> -->
                <!-- <span class="text text-wait" v-if="days > 0">:</span> -->
                <!-- <span class="text text-wait" v-if="hours > 0">{{ hours }}</span> -->
                <!-- <span class="text text-wait" v-if="hours > 0">:</span> -->
                <span class="text text-wait">{{ minutes }}</span>
                <span class="text text-wait">:</span>
                <span class="text text-wait">{{ seconds }}</span>
              </div>
              <img loading="lazy" class="icon" src="https://cd.sealmg.com/assets/img/pay-status-wait.png" alt />
            </div>
            <div class="pay-item flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('formItem.payNo') }}</span>
              <span class="cont">{{ detailInfo.order_no || '--' }}</span>
            </div>
            <div class="pay-item flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('orderPage.payStatus') }}</span>
              <div>
                <span class="cont">{{ detailInfo.order_status_text }}</span>
                <!-- :0=等待付款,1=等待发货,2=处理中,3=发货中,4=已完成,5=已退款,6=取消订单 -->
              </div>
            </div>
            <div class="pay-item flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('orderPage.createTime') }}</span>
              <span class="cont">{{ detailInfo.create_time_text || '--' }}</span>
            </div>
            <!-- <div
              class="pay-item flexbox flex-align-center flex-justify-between"
            >
              <span class="label">{{ $t("orderPage.expirationTime") }}</span>
              <span class="cont">{{
                detailInfo.expire_time_text || "--"
              }}</span>
            </div> -->
            <div class="line"></div>
            <div class="pay-item flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('formItem.productNum') }}</span>
              <span class="cont">{{ detailInfo.order_goods ? detailInfo.order_goods.length : 0 }}</span>
            </div>
            <div class="pay-item flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('formItem.total1') }}</span>
              <!-- {{detailInfo.currency_code}} -->
              <span class="cont">
                {{ detailInfo.currency_symbol }}{{ detailInfo.order_status != 0 ? detailInfo.pay_price_text : serviceFee.pay_price }}
              </span>
            </div>
            <!-- {{ detailInfo }} -->
            <div class="pay-item pay-type flexbox flex-align-center flex-justify-between" v-if="selectPayment.pay_icon">
              <span class="label">{{ $t('orderPage.payType') }}</span>
              <div class="flexbox flex-align-center gap-2">
                <img class="h-[1.25rem] object-cover" v-lazy="$globalFn.imgPrefixUrl(selectPayment.pay_icon)" alt />
                <span class="cont">{{ selectPayment.pay_name }}</span>
              </div>
            </div>
            <!-- <div class="pay-item flexbox flex-align-center flex-justify-between">
                        <span class="label">金额</span>
                        <span class="cont pay-price">{{detailInfo.currency_symbol}}{{detailInfo.payable_price_text||0}}</span>
            </div>-->
            <div class="pay-item pay-service flexbox flex-justify-between" v-if="detailInfo.order_status == 0">
              <span class="lable">{{ $t('orderPage.serviceCharge') }}</span>
              <div class="cont">
                <div class="price" v-if="curPay.service_price">
                  {{ detailInfo.currency_symbol }}
                  {{ Number(curPay.service_price).toFixed(2) }}
                </div>
                <div class="rate">
                  <div v-if="curPay.service_price > 0">
                    (
                    <span> ={{ curPay.service_percentage }}% </span>
                    <span v-if="curPay.service_price_fixed > 0">
                      +
                      {{ detailInfo.currency_symbol }}
                      {{ curPay.service_price_fixed }}
                    </span>
                    )
                  </div>
                  <div v-else>{{ $t('orderPage.serviceFree') }}</div>
                </div>
              </div>
            </div>
            <div class="pay-item pay-service flexbox flex-justify-between" v-if="detailInfo.order_status != 0">
              <span class="lable">{{ $t('orderPage.serviceCharge') }}</span>
              <div class="cont" v-if="detailInfo.service_price">
                <div class="price">
                  {{ detailInfo.currency_symbol }}
                  {{ Number(detailInfo.service_price).toFixed(2) }}
                </div>
                <div class="rate">
                  <div v-if="detailInfo.service_price > 0">（={{ detailInfo.service_percentage }}%）</div>
                  <div v-else>{{ $t('orderPage.serviceFree') }}</div>
                </div>
              </div>
            </div>
            <div
              class="handle flexbox flex-align-center flex-justify-between"
              v-if="detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm'"
            >
              <span class="price">{{ detailInfo.currency_symbol }}{{ serviceFee.pay_price || 0 }}</span>
              <!-- 继续支付 -->
              <el-button class="theme-btn" @click="submitPayOrder">{{ $t('orderPage.nowPay') }}</el-button>
            </div>
            <div class="pay-notice" v-if="detailInfo.order_status == 0">
              <span class="text">{{ $t('orderPage.payNOtice') }}</span>
              <NuxtLink class="text red hover:underline" :to="goPathDetail('/article/sales-terms')"> {{ $t('orderPage.saleProtocol') }}, </NuxtLink>
              <NuxtLink class="text red hover:underline" :to="goPathDetail('/article/terms-of-use')"> {{ $t('orderPage.useProtocol') }}, </NuxtLink>
              <NuxtLink class="text red hover:underline" :to="goPathDetail('/article/privacy-policy')">
                {{ $t('orderPage.privacyProtocol') }}.
              </NuxtLink>
            </div>
            <div class="pay-notice"></div>
          </div>
        </div>
        <div class="mode curpay" v-if="detailInfo.order_status == 0">
          <div class="title flexbox flex-align-center">
            <span class="text">{{ $t('orderPage.payType') }}</span>
          </div>
          <div class="content flexbox flex-align-center flex-justify-between">
            <div class="cur-left flexbox flex-align-center">
              <div class="aspect-video overflow-hidden w-1/4">
                <img loading="lazy" class="size-full object-contain" v-lazy="$globalFn.imgPrefixUrl(curPay.pay_icon)" alt />
              </div>
              <span class="name">{{ curPay.pay_name }}</span>
            </div>
            <img loading="lazy" class="icon" src="https://cd.sealmg.com/assets/img/arrow-right-edit.png" alt srcset @click="showpay = true" />
          </div>
          <div class="service flexbox flex-justify-between">
            <span class="lable">{{ $t('orderPage.serviceCharge') }}</span>
            <div class="cont" v-if="curPay.service_price">
              <div class="price">
                {{ detailInfo.currency_symbol }}
                {{ Number(curPay.service_price).toFixed(2) }}
              </div>
              <div class="rate">
                <div v-if="curPay.service_price > 0">（={{ curPay.service_percentage }}%）</div>
                <div v-else>{{ $t('orderPage.serviceFree') }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lg:flex hidden">
      <div class="h-[88px]"></div>
    </div>
    <!-- 订单状态:0=等待付款,1=等待发货,2=处理中,3=发货中,4=已完成,5=已退款,6=取消订单 -->
    <div class="bottom-box !w-full !h-auto !pb-2" v-if="detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm'">
      <div class="handle flexbox flex-align-center flex-justify-between">
        <span class="price">{{ detailInfo.currency_symbol }}{{ serviceFee.pay_price || 0 }}</span>
        <!-- 继续支付 -->
        <el-button class="theme-btn" @click="submitPayOrder">{{ $t('orderPage.nowPay') }}</el-button>
      </div>
      <div class="pay-notice">
        <span class="text">{{ $t('orderPage.payNOtice') }}</span>
        <NuxtLink class="text red" :to="goPathDetail('/article/sales-terms')"> {{ $t('orderPage.saleProtocol') }}、 </NuxtLink>
        <NuxtLink class="text red" :to="goPathDetail('/article/terms-of-use')"> {{ $t('orderPage.useProtocol') }}、 </NuxtLink>
        <NuxtLink class="text red" :to="goPathDetail('/article/privacy-policy')">
          {{ $t('orderPage.privacyProtocol') }}
        </NuxtLink>
      </div>
    </div>
    <el-drawer class="title common-drawer pay-drawer" :visible.sync="showpay" direction="btt" :show-close="false">
      <!-- :before-close="handleClose" -->
      <div class="common-cont flex relative flex-col">
        <div class="title flexbox flex-align-center flex-justify-between !flex-1 bg-white !py-4 sticky top-0">
          <span class="name">{{ $t('orderPage.payType') }}</span>
          <img loading="lazy" class="icon" src="https://cd.sealmg.com/assets/img/close-icon.png" alt=https://cd.sealmg.com/assets/img/close-icon.png
          srcset @click="showpay = false" />
        </div>
        <div class="overflow-y-scroll flex-grow">
          <div class="list flexbox flex-wrap">
            <div
              :class="['item flexbox flex-align-center flex-justify-between', curPay.id == item.id ? 'active' : '']"
              v-for="item in payList"
              :key="item.id"
              @click="changePay(item)"
            >
              <div class="left flexbox flex-align-center w-[80%]">
                <div class="aspect-video overflow-hidden flex-none w-1/4">
                  <img loading="lazy" class="size-full object-contain" v-lazy="$globalFn.imgPrefixUrl(item.pay_icon)" :alt="item.pay_icon" srcset />
                </div>
                <div class="info">
                  <div class="name">{{ item.pay_name || '--' }}</div>
                  <div class="cost" v-if="item.service_price == 0">
                    {{ $t('orderPage.serviceFree') }}
                  </div>
                  <div class="rate" v-else>{{ item.service_percentage }}%{{ $t('orderPage.serviceCharge1') }}</div>
                </div>
              </div>
              <div class="checkbox">
                <img
                  loading="lazy"
                  class="icon"
                  v-if="curPay.id == item.id"
                  src="https://cd.sealmg.com/assets/img/checkbox-active.png"
                  alt="https://cd.sealmg.com/assets/img/checkbox-active.png"
                  srcset
                />
                <img
                  loading="lazy"
                  class="icon"
                  v-else
                  src="https://cd.sealmg.com/assets/img/checkbox.png"
                  alt="https://cd.sealmg.com/assets/img/checkbox.png"
                  srcset
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer class="common-drawer goods-drawer" titlebltitle :visible.sync="showgoods" direction="btt" :show-close="false">
      <!-- :before-close="handleClose" -->
      <div class="common-cont">
        <div class="title flexbox flex-align-center flex-justify-between">
          <span class="name">{{ $t('orderPage.goodsInfo') }}</span>
          <div class="flexbox flex-align-center">
            <span class="num">x{{ detailInfo.order_goods && detailInfo.order_goods.length ? detailInfo.order_goods.length : 0 }}</span>
            <img loading="lazy" class="icon" src="https://cd.sealmg.com/assets/img/close-icon.png" alt=https://cd.sealmg.com/assets/img/close-icon.png
            srcset @click="showgoods = false" />
          </div>
        </div>
        <div class="list" v-if="detailInfo.order_goods">
          <div class="item" v-for="item in detailInfo.order_goods" :key="item.order_no">
            <div class="top flexbox flex-align-center">
              <span class="text">{{ $t('userInfo.orderNo') }}</span>
              <span class="no">{{ item.order_no || '--' }}</span>
            </div>
            <div class="goods-info flexbox flex-align-center flex-justify-between">
              <div class="goods-left flexbox flex-align-center" @click="goDetail(item)">
                <img
                  loading="lazy"
                  class="img"
                  v-lazy="$globalFn.imgPrefixUrl(item.goods_info ? item.goods_info.image : '')"
                  :alt="item.goods_info.image"
                  srcset
                />
                <div class="left-info">
                  <div class="name one-line">
                    {{ item.goods_info ? item.goods_info.goods_name : '--' }}
                  </div>
                  <div class="type one-line">
                    {{ item.goods_info && item.goods_info.sku && item.goods_info.sku ? item.goods_info.sku.title : '--' }}
                  </div>
                </div>
              </div>
              <div class="goods-right">
                <div class="price">{{ item.currency_symbol }}{{ item.unit_price || 0 }}</div>
                <div class="num" v-if="item.total_num">x{{ item.total_num || 0 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- <GlobalLoader ref="loading" /> -->
  </div>
</template>
<script>
  import { throttle, debounce } from '@/static/js/common'
  export default {
    layout: 'newsHome',
    name: 'orderPay',
    key(route) {
      return route.fullPath
    },
    head() {
      return {
        title: `Checkout - SEALMG`,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content:
              'Complete your purchase securely on SEALMG. Review your order details and choose from our trusted payment methods for a smooth checkout experience.'
          }
        ]
      }
    },
    data: function () {
      return {
        detailId: '', // 订单ID
        detailInfo: {}, // 订单详情
        payList: [], // 支付方式列表
        showpay: false, // 是否显示支付方式弹窗
        curPay: {}, // 当前选择的支付方式
        serviceFee: {}, // 服务费
        showgoods: false, // 是否显示商品列表弹窗
        endTime: 0, // 结束时间的时间戳
        currentTime: Date.now(), // 当前时间的时间戳
        countdownInterval: null, // 倒计时定时器
        minutes: '15', // 倒计时分钟数
        seconds: '00', // 倒计时秒数
        result: [],
        selectPayment: {}
      }
    },
    created() {
      const { no, order_no } = this.$route.query
      if (no || order_no) {
        this.detailId = no || order_no
        this.getPayOrderDetail()
      }
    },
    beforeDestroy() {
      clearInterval(this.countdownInterval)
    },
    watch: {
      'curPay.id'(newValue, oldValue) {
        this.selectPayment = this.payList.find(item => item.id == newValue)
      }
    },
    methods: {
      // 跳转到订单详情页
      orderDetail(item) {
        this.$router.push({
          path: this.localePath('/order/detail'),
          query: {
            no: item.order_no
          }
        })
      },
      // 跳转到商品详情页
      goDetail(item) {
        this.showgoods = false
        if (item.type == 1) {
          this.$router.push({
            path: this.localePath(`/product/${item.goods_info.code}`)
          })
        } else if (item.type == 2) {
          this.$router.push({
            path: this.localePath(`/product/${item.goods_info.code}`)
          })
        }
      },
      // 开始倒计时
      startCountdown() {
        this.countdownInterval = setInterval(() => {
          this.currentTime += 1000
          const timeRemaining = this.endTime - this.currentTime
          if (timeRemaining <= 0) {
            clearInterval(this.countdownInterval)
            this.detailInfo.order_status = 6
            //this.formattedTime = "已结束";
            this.getPayOrderDetail()
          } else {
            this.updateFormattedTime(timeRemaining)
          }
        }, 1000)
      },
      // 更新倒计时显示时间
      updateFormattedTime(timeRemaining) {
        const seconds = Math.floor((timeRemaining / 1000) % 60)
        const minutes = Math.floor((timeRemaining / 1000 / 60) % 60)
        const hours = Math.floor((timeRemaining / (1000 * 60 * 60)) % 24)
        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24))
        this.days = String(days).padStart(2, '0')
        this.hours = String(hours).padStart(2, '0')
        this.minutes = String(minutes).padStart(2, '0')
        this.seconds = String(seconds).padStart(2, '0')
        //this.formattedTime = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
      },
      // 获取本地化路径
      goPathDetail(item) {
        let p = this.localePath(item)
        return p
      },
      // 获取服务费
      getServiceFee() {
        this.$axios.get(`/api/pay/calcServiceFee?order_no=${this.detailInfo.order_no}&payment_id=${this.curPay.id}`).then(res => {
          this.serviceFee = res
        })
      },
      // 获取支付方式列表
      getPayList() {
        this.$axios.get(`/api/pay/getPayList?order_no=${this.detailInfo.order_no}`).then(res => {
          this.payList = res || []
          if (this.payList.length) {
            this.curPay = this.payList[0]
            this.getServiceFee()
          }
        })
      },
      functions(e) {
        if (e.type === 'select' && e.options && e.value) {
          const optionsArray = e.options.split('|').map(opt => {
            const [label, value] = opt.split(':')
            return { label, value }
          })

          const selectedOption = optionsArray.find(opt => opt.value === e.value)

          return selectedOption ? selectedOption.label : e.value
        }

        // 非select类型直接返回value
        return e.value
      },
      // 获取支付订单详情
      async getPayOrderDetail() {
        let res = await this.$axios.get(`/api/order/read?id=${this.detailId}`)
        this.detailInfo = res || {}

        this.result = res.order_goods[0].goods_info?.ext.map(item => ({
          ...item,
          value: res.order_goods[0].goods_info?.user_ext[item.field]
        }))

        if (this.detailInfo.order_status == 0 && this.detailInfo.payment_order_status != 'awaiting_confirm') {
          this.endTime = this.detailInfo.expire_time * 1000
          this.startCountdown()
          this.getPayList()
        }
      },
      // 切换支付方式
      changePay(item) {
        this.curPay = item
        this.showpay = false
        this.getServiceFee()
      },

      // 提交支付订单
      submitPayOrder: debounce(
        async function () {
          try {
            this.$nuxt.$loading.start()
            // 发起支付请求
            const res = await this.$axios.post(`/api/pay/buy`, {
              order_no: this.detailInfo.order_no,
              payment_id: this.curPay.id,
              pay_price: this.serviceFee.pay_price
            })
            // this.$store.dispatch("user/getUserInfo");
            // this.$refs.loading.finish();
            // 处理重定向支付
            if (process.client && res.todo === 'redirect' && res.redirect_url) {
              // window.location.href = res.redirect_url;
              const link = document.createElement('a')
              link.href = res.redirect_url
              link.target = '_self' // 或 '_self' _blank 根据需求
              link.style.display = 'none'
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              this.$nuxt.$loading.finish() // 关闭loading
              return
            }
            // 刷新订单详情
            await this.getPayOrderDetail()
            this.$nuxt.$loading.finish() // 关闭loading
          } catch (error) {
            // 错误处理
            this.$nuxt.$loading.finish()
            console.error('支付请求失败:', error)
            // this.$message.error("支付请求失败,请重试");
          }
        },
        200,
        {
          leading: true,
          trailing: false
        }
      )
    }
  }
</script>
<style lang="less" scoped>
  .common-drawer {
    left: 50%;
    width: 375px;
    transform: translateX(-50%);
    /deep/.el-drawer {
      height: 400px !important;
      border-radius: 16px 16px 0px 0px;
    }
    /deep/.el-drawer__header {
      display: none;
    }
    .common-cont {
      border-radius: 16px 16px 0px 0px;
      .title {
        padding: 0 16px;
        height: 52px;
        .name {
          font-weight: 500;
          font-size: 16px;
          color: @font-color-14;
        }
        .num {
          margin-right: 10px;
          font-size: 12px;
          color: @font-color-99;
        }
        .icon {
          width: 20px;
          height: 20px;
        }
      }
      .list {
        box-sizing: border-box;
        padding: 0 16px;
        padding-bottom: 48px;
        width: 100%;
      }
    }
  }
  .pay-drawer {
    .common-cont {
      .list {
        .item {
          box-sizing: border-box;
          width: 100%;
          padding: 12px 10px;
          margin-top: 12px;
          background: @color-f7;
          border-radius: 8px;
          cursor: pointer;
          border: @border-1-f7;
          .left {
            .img {
              width: 32px;
              height: 32px;
              border-radius: 8px;
            }
            .info {
              margin-left: 8px;
              .name {
                font-weight: 500;
                font-size: 13px;
                color: @font-color-14;
              }
              .cost {
                margin-top: 4px;
                font-size: 11px;
                color: @theme-color;
              }
              .rate {
                margin-top: 4px;
                font-size: 11px;
                color: @font-color-99;
              }
            }
          }
          .checkbox {
            .icon {
              width: 16px;
              height: 16px;
            }
          }
        }
        .item:nth-child(2n + 1) {
          margin-left: 0;
        }
        //
        .item.active {
          background: @input-focus-bg;
          border: 1px solid @theme-color;
        }
      }
    }
  }
  .goods-drawer {
    .list {
      margin-top: 8px;
      .item {
        margin-bottom: 12px;
        .top {
          padding: 0 12px;
          height: 36px;
          background: @color-f7;
          border-radius: 12px 12px 0px 0px;
          font-weight: 500;
          font-size: 12px;
          color: @font-color-14;
          .no {
            margin-left: 4px;
            color: @theme-color;
          }
        }
        .goods-info {
          padding: 0 12px;
          height: 68px;
          background: @color-ff;
          // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
          border-radius: 0px 0px 12px 12px;
          .goods-left {
            .img {
              width: 44px;
              height: 44px;
              margin-right: 10px;
              border-radius: 8px;
            }
            .left-info {
              margin-left: 10px;
              .name {
                width: 180px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .type {
                width: 180px;
                font-weight: 400;
                font-size: 10px;
                color: @font-color-99;
              }
            }
          }
          .goods-right {
            text-align: right;
            .price {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: 500;
              font-size: 14px;
              color: @theme-color;
            }
            .num {
              height: 20px;
              line-height: 20px;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
            }
            .icon {
              width: 24px;
              height: 24px;
              margin-left: 8px;
            }
          }
        }
      }
      .item:last-child {
        margin-bottom: 0;
      }
    }
  }
  .order-pay-page {
    .box-center {
      margin-top: 20px;
      .mode {
        box-sizing: border-box;
        // width: 745px;
        padding: 20px 24px 11px 24px;
        .title {
          padding-bottom: 8px;
          border-bottom: @border-1-e5;
          .text {
            font-weight: 500;
            font-size: 22px;
            color: @font-color-14;
          }
        }
      }
      .left {
        box-sizing: border-box;
        // width: 745px;
        border-radius: 16px;
        .goods {
          padding: 24px 20px;
          margin-top: 8px;
          .title {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-66;
          }
          .list {
            margin-top: 16px;
            background: @color-ff;
            // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 8px;
            .goods-row {
              border-radius: 8px 8px 0 0;
              .item-col {
                width: 110px;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-99;
                text-align: center;
              }
              .base-col {
                box-sizing: border-box;
                width: 283px;
                text-align: left;
                padding-left: 24px;
              }
              .no-col {
                // width: 180px;
                cursor: pointer;
              }
            }
            .row-header {
              height: 50px;
              background: @color-f7;
            }
            .row-body {
              height: 80px;
              .base-col {
                padding: 0 20px;
                .img {
                  width: 56px;
                  height: 56px;
                  border-radius: 7px;
                  cursor: pointer;
                }
                .info {
                  margin-left: 12px;
                  .name {
                    width: 170px;
                    font-weight: 500;
                    font-size: 14px;
                    color: @font-color-26;
                  }
                  .desc {
                    width: 170px;
                    margin-top: 4px;
                    font-size: 12px;
                    color: @font-color-66;
                  }
                }
              }
              .no-col {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: 500;
                font-size: 12px;
                color: @theme-color;
              }
              .price-col {
                .price {
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-26;
                }
                .num {
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-26;
                }
              }
              .total-col {
                font-weight: 500;
                font-size: 14px;
                color: @theme-color;
              }
            }
          }
          .cards {
            display: none;
          }
        }
        .pay {
          padding: 20px 24px;
          .title {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-66;
          }
          .list {
            margin-top: 0px;
            .item {
              box-sizing: border-box;
              padding: 0 20px;
              margin-left: 20px;
              margin-top: 20px;
              width: 338px;
              height: 96px;
              background: @color-f7;
              border-radius: 16px;
              cursor: pointer;
              border: @border-1-f7;
              .left {
                .img {
                  width: 96px;
                  height: 32px;
                  .icon {
                    padding: 1px 6px;
                    width: 100%;
                    height: 100%;
                    overflow: clip;
                    box-sizing: border-box;
                    object-fit: contain;
                    aspect-ratio: 1 / 1;
                  }
                }
                .info {
                  margin-left: 12px;
                  .name {
                    font-weight: 500;
                    font-size: 16px;
                    color: @font-color-14;
                  }
                  .cost {
                    margin-top: 2px;
                    font-weight: 500;
                    font-size: 12px;
                    color: @theme-color;
                  }
                  .rate {
                    font-weight: 500;
                    margin-top: 2px;
                    font-size: 12px;
                    color: @font-color-99;
                  }
                }
              }
              .checkbox {
                .icon {
                  width: 16px;
                  height: 16px;
                }
              }
            }
            .item:nth-child(2n + 1) {
              margin-left: 0;
            }
            //
            .item.active {
              background: @input-focus-bg;
              border: 1px solid @theme-color;
            }
          }
        }
      }
      .right {
        box-sizing: border-box;
        // width: 435px;
        margin-left: 20px;
        .mode {
          width: auto;
          padding: 0 24px;
          .title {
            padding-top: 20px;
          }
          .content {
            padding: 0 8px;
          }
        }
        .pay {
          background: @color-ff;
          .title {
            margin-bottom: 20px;
          }
          .pay-status {
            margin-top: 28px;
            height: 40px;
            .text {
              font-weight: 600;
              font-size: 24px;
            }
            .text-success {
              color: #52c41a;
            }
            .text-close {
              color: #cccccc;
            }
            .text-wait {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: bold;
              font-size: 32px;
              color: @theme-color;
            }
            .icon {
              width: 40px;
              height: 40px;
            }
          }
          .pay-item {
            margin-top: 20px;
            .label {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .cont {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-26;
            }
            .icon {
              width: 20px;
              height: 20px;
              margin-right: 8px;
            }
            .pay-price {
              font-family: Helvetica, Helvetica;
              font-weight: bold;
              font-size: 24px;
              color: @theme-color;
            }
          }
          .pay-service {
            padding: 0;
            height: 40px;
            margin-top: 8px;
            margin-bottom: 8px;
            .lable {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .price {
              text-align: right;
              font-weight: 500;
              font-size: 14px;
              color: @font-color-26;
            }
            .rate {
              text-align: right;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
            }
          }
          .pay-item:first-child {
            margin-top: 16px;
          }
          .line {
            margin: 0 auto;
            margin-top: 20px;
            width: 371px;
            height: 2px;
            background: @color-f0;
          }
          .handle {
            margin-top: 42px;
            .price {
              font-family: Helvetica, Helvetica;
              font-weight: bold;
              font-size: 24px;
              color: @theme-color;
            }
            .theme-btn {
              width: 233px;
              height: 50px;
              line-height: 50px;
            }
          }
          .pay-notice {
            text-align: center;
            margin-top: 8px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-99;
            .red {
              color: @theme-color;
              cursor: pointer;
            }
          }
        }
        .curpay {
          display: none;
        }
      }
    }
    .bottom-box {
      display: none;
    }
  }
  @media only screen and (min-width: 1200px) {
    .pay-drawer {
      display: none;
    }
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .order-pay-page {
      .box-center {
        margin-top: 0px;
        display: block;
        .mode {
          box-sizing: border-box;
          width: 100%;
          padding: 16px 16px 8px 16px;
          .title {
            padding-bottom: 8px;
            border-bottom: @border-1-e5;
            .text {
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
          }
        }
        .left {
          box-sizing: border-box;
          width: 100%;
          border-radius: 16px;
          .goods {
            padding: 0 16px;
            margin-top: 8px;
            .title {
              display: none;
            }
            .list {
              display: none;
            }
            .cards {
              display: block;
              .cards-item {
                margin-bottom: 12px;
                .top {
                  padding: 0 12px;
                  height: 36px;
                  background: @color-f7;
                  border-radius: 12px 12px 0px 0px;
                  font-weight: 500;
                  font-size: 12px;
                  // color: @font-color-14;
                  color: @font-color-99;
                  .no {
                    color: @theme-color;
                  }
                }
                .goods-info {
                  padding: 0 12px;
                  height: 68px;
                  background: @color-ff;
                  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
                  border-radius: 0px 0px 12px 12px;
                  .goods-left {
                    .img {
                      width: 44px;
                      height: 44px;
                      margin-right: 10px;
                      border-radius: 8px;
                    }
                    .left-info {
                      margin-left: 10px;
                      .name {
                        width: 180px;
                        font-weight: 500;
                        font-size: 12px;
                        color: @font-color-14;
                      }
                      .type {
                        width: 180px;
                        font-weight: 400;
                        font-size: 10px;
                        color: @font-color-99;
                      }
                    }
                  }
                  .goods-right {
                    text-align: right;
                    .price {
                      font-family: HelveticaNeue, HelveticaNeue;
                      font-weight: 500;
                      font-size: 14px;
                      color: @theme-color;
                    }
                    .num {
                      height: 20px;
                      line-height: 20px;
                      font-weight: 500;
                      font-size: 12px;
                      color: @font-color-99;
                    }
                    .icon {
                      width: 24px;
                      height: 24px;
                      margin-left: 8px;
                    }
                  }
                }
              }
              .cards-item:last-child {
                margin-bottom: 0;
              }
            }
          }
          .pay {
            display: none;
            padding: 20px 24px;
            .title {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .list {
              margin-top: 16px;
              .item {
                box-sizing: border-box;
                padding: 0 20px;
                margin-left: 20px;
                margin-top: 20px;
                width: 338px;
                height: 96px;
                background: @color-f7;
                border-radius: 16px;
                cursor: pointer;
                border: @border-1-f7;
                .left {
                  .img {
                    width: 42px;
                    height: 42px;
                    border-radius: 8px;
                  }
                  .info {
                    margin-left: 12px;
                    .name {
                      font-weight: 500;
                      font-size: 16px;
                      color: @font-color-14;
                    }
                    .cost {
                      margin-top: 2px;
                      font-weight: 500;
                      font-size: 12px;
                      color: @theme-color;
                    }
                  }
                }
                .checkbox {
                  .icon {
                    width: 16px;
                    height: 16px;
                  }
                }
              }
              .item:nth-child(2n + 1) {
                margin-left: 0;
              }
              //
              .item.active {
                background: @input-focus-bg;
                border: 1px solid @theme-color;
              }
            }
          }
        }
        .right {
          box-sizing: border-box;
          width: 100%;
          margin-left: 0px;
          padding: 0px 16px;
          padding-bottom: 32px;
          .mode {
            box-sizing: border-box;
            margin-top: 16px;
            width: 100%;
            padding: 0;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 12px;
            overflow: hidden;
            .title {
              padding: 10px 12px;
              background: @color-f7;
              border-radius: 12px 12px 0px 0px;
              border-bottom: none;
              .text {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
            }
            .content {
              padding: 16px 12px;
            }
          }
          .pay {
            .title {
              margin-bottom: 20px;
            }
            .pay-status {
              margin-top: 0px;
              height: 33px;
              .text {
                font-weight: 600;
                font-size: 24px;
              }
              .text-success {
                color: #52c41a;
              }
              .text-close {
                color: #cccccc;
              }
              .text-wait {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: bold;
                font-size: 32px;
                color: @theme-color;
              }
              .icon {
                width: 32px;
                height: 32px;
              }
            }
            .pay-item {
              margin-top: 16px;
              .label {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .cont {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
              }
              .pay-price {
                font-family: Helvetica, Helvetica;
                font-weight: bold;
                font-size: 24px;
                color: @theme-color;
              }
            }
            .pay-item:first-child {
              margin-top: 0px;
            }
            .pay-service {
              display: none;
            }
            .pay-type {
              display: none;
            }
            .line {
              margin-top: 16px;
              width: 100%;
              height: 1px;
              background: @color-f0;
            }
            .handle {
              display: none;
            }
            .pay-notice {
              display: none;
            }
          }
          .curpay {
            display: block;
            .service {
              padding: 0 16px;
              height: 40px;
              margin-top: 8px;
              margin-bottom: 8px;
              .lable {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .price {
                text-align: right;
                margin-right: 4px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .rate {
                text-align: right;
                margin-top: 4px;
                font-weight: 400;
                font-size: 10px;
                color: @font-color-99;
              }
            }
            .content {
              .cur-left {
                .img {
                  width: 24px;
                  height: 24px;
                }
                .name {
                  margin-left: 8px;
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
              }
              .icon {
                width: 24px;
                height: 24px;
              }
            }
          }
        }
      }
      .bottom-box {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 375px;
        height: 90px;
        transform: translateX(-50%);
        background: @color-ff;
        z-index: 55;
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        .handle {
          padding: 0 16px;
          margin-top: 10px;
          .price {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 20px;
            color: @theme-color;
          }
          .theme-btn {
            padding: 0 34px;
            width: auto;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
          }
        }
        .pay-notice {
          padding: 0 16px;
          text-align: center;
          margin-top: 8px;
          font-weight: 500;
          font-size: 10px;
          color: @font-color-99;
          .red {
            color: @theme-color;
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .order-pay-page {
      .box-center {
        margin-top: 0px;
        display: block;
        .mode {
          box-sizing: border-box;
          width: 100%;
          padding: 16px 16px 8px 16px;
          .title {
            padding-bottom: 8px;
            border-bottom: @border-1-e5;
            .text {
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
          }
        }
        .left {
          box-sizing: border-box;
          width: 100%;
          border-radius: 16px;
          .goods {
            padding: 0 16px;
            margin-top: 8px;
            .title {
              display: none;
            }
            .list {
              display: none;
            }
            .cards {
              display: block;
              .cards-item {
                margin-bottom: 12px;
                .top {
                  padding: 0 12px;
                  height: 36px;
                  background: @color-f7;
                  border-radius: 12px 12px 0px 0px;
                  font-weight: 500;
                  font-size: 12px;
                  // color: @font-color-14;
                  color: @font-color-99;
                  .no {
                    color: @theme-color;
                  }
                }
                .goods-info {
                  padding: 0 12px;
                  height: 68px;
                  background: @color-ff;
                  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
                  border-radius: 0px 0px 12px 12px;
                  .goods-left {
                    .img {
                      width: 44px;
                      height: 44px;
                      margin-right: 10px;
                      border-radius: 8px;
                    }
                    .left-info {
                      margin-left: 10px;
                      .name {
                        width: 180px;
                        font-weight: 500;
                        font-size: 12px;
                        color: @font-color-14;
                      }
                      .type {
                        width: 180px;
                        font-weight: 400;
                        font-size: 10px;
                        color: @font-color-99;
                      }
                    }
                  }
                  .goods-right {
                    text-align: right;
                    .price {
                      font-family: HelveticaNeue, HelveticaNeue;
                      font-weight: 500;
                      font-size: 14px;
                      color: @theme-color;
                    }
                    .num {
                      height: 20px;
                      line-height: 20px;
                      font-weight: 500;
                      font-size: 12px;
                      color: @font-color-99;
                    }
                    .icon {
                      width: 24px;
                      height: 24px;
                      margin-left: 8px;
                    }
                  }
                }
              }
              .cards-item:last-child {
                margin-bottom: 0;
              }
            }
          }
          .pay {
            display: none;
            padding: 20px 24px;
            .title {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .list {
              margin-top: 16px;
              .item {
                box-sizing: border-box;
                padding: 0 20px;
                margin-left: 20px;
                margin-top: 20px;
                width: 338px;
                height: 96px;
                background: @color-f7;
                border-radius: 16px;
                cursor: pointer;
                border: @border-1-f7;
                .left {
                  .img {
                    width: 42px;
                    height: 42px;
                    border-radius: 8px;
                  }
                  .info {
                    margin-left: 12px;
                    .name {
                      font-weight: 500;
                      font-size: 16px;
                      color: @font-color-14;
                    }
                    .cost {
                      margin-top: 2px;
                      font-weight: 500;
                      font-size: 12px;
                      color: @theme-color;
                    }
                  }
                }
                .checkbox {
                  .icon {
                    width: 16px;
                    height: 16px;
                  }
                }
              }
              .item:nth-child(2n + 1) {
                margin-left: 0;
              }
              //
              .item.active {
                background: @input-focus-bg;
                border: 1px solid @theme-color;
              }
            }
          }
        }
        .right {
          box-sizing: border-box;
          width: 100%;
          margin-left: 0px;
          padding: 0px 16px;
          padding-bottom: 32px;
          .mode {
            box-sizing: border-box;
            margin-top: 16px;
            width: 100%;
            padding: 0;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 12px;
            overflow: hidden;
            .title {
              padding: 10px 12px;
              background: @color-f7;
              border-radius: 12px 12px 0px 0px;
              border-bottom: none;
              .text {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
            }
            .content {
              padding: 16px 12px;
            }
          }
          .pay {
            .title {
              margin-bottom: 20px;
            }
            .pay-status {
              margin-top: 0px;
              height: 33px;
              .text {
                font-weight: 600;
                font-size: 24px;
              }
              .text-success {
                color: #52c41a;
              }
              .text-close {
                color: #cccccc;
              }
              .text-wait {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: bold;
                font-size: 32px;
                color: @theme-color;
              }
              .icon {
                width: 32px;
                height: 32px;
              }
            }
            .pay-item {
              margin-top: 16px;
              .label {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .cont {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
              }
              .pay-price {
                font-family: Helvetica, Helvetica;
                font-weight: bold;
                font-size: 24px;
                color: @theme-color;
              }
            }
            .pay-item:first-child {
              margin-top: 0px;
            }
            .pay-service {
              display: none;
            }
            .pay-type {
              display: none;
            }
            .line {
              margin-top: 16px;
              width: 100%;
              height: 1px;
              background: @color-f0;
            }
            .handle {
              display: none;
            }
            .pay-notice {
              display: none;
            }
          }
          .curpay {
            display: block;
            .service {
              padding: 0 16px;
              height: 40px;
              margin-top: 8px;
              margin-bottom: 8px;
              .lable {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .price {
                text-align: right;
                margin-right: 4px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .rate {
                text-align: right;
                margin-top: 4px;
                font-weight: 400;
                font-size: 10px;
                color: @font-color-99;
              }
            }
            .content {
              .cur-left {
                .img {
                  width: 24px;
                  height: 24px;
                }
                .name {
                  margin-left: 8px;
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
              }
              .icon {
                width: 24px;
                height: 24px;
              }
            }
          }
        }
      }
      .bottom-box {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 375px;
        height: 90px;
        transform: translateX(-50%);
        background: @color-ff;
        z-index: 55;
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        .handle {
          padding: 0 16px;
          margin-top: 10px;
          .price {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 20px;
            color: @theme-color;
          }
          .theme-btn {
            padding: 0 34px;
            width: auto;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
          }
        }
        .pay-notice {
          padding: 0 16px;
          text-align: center;
          margin-top: 8px;
          font-weight: 500;
          font-size: 10px;
          color: @font-color-99;
          .red {
            color: @theme-color;
          }
        }
      }
    }
  }
</style>
